<template>
  <view class="map-selection">
    <view class="select-item" @click="goToMap('traffic')">
      交通
    </view>

    <view class="select-item" @click="goToMap('food')">
      美食
    </view>

    <view class="select-item" @click="goToMap('shopping')">
      购物
    </view>

    <view class="select-item" @click="goToMap('leisure')">
      休闲
    </view>

    <view class="select-item" @click="goToMap('sports')">
      运动
    </view>

    <view class="select-item" @click="goToMap('treatment')">
      医疗
    </view>
  </view>
</template>

<script>
  import {getRouterParam, uniNavigate,} from "../../util/misc"
  import {uniGetStorageSync, uniSetStorageSync} from "../../util/funcs"
  import {ROUTER_OBJ} from "../../util/misc"

  export default {
    props: {
      item: {
        type: Object
      }
    },
    data() {
      return {
        latitude: 39.909, // 默认定在首都
        longitude: 116.39742,
        scale: 12, // 默认16
        markers: [],
        markerHeight: 30,
        markerWidth: 30,
      };
    },
    methods: {
      goToMap(word) {
        uniSetStorageSync(ROUTER_OBJ, {
          ...this.item,
          word_Surrounding: word
        })
        // console.log('house:', this.item, this.item)
        // return
        uniNavigate('/displayDetails/mapBrowser')
      },
    },
    onReady() {
      // //   wx请求获取位置权限
      // this.getAuthorize()
      //   .then(() => {
      //     //   同意后获取
      //     this.getLocationInfo();
      //   })
      //   .catch(() => {
      //     //   不同意给出弹框，再次确认
      //     this.openConfirm()
      //       .then(() => {
      //         this.getLocationInfo();
      //       })
      //       .catch(() => {
      //         this.rejectGetLocation();
      //       });
      //   });
    },
  };
</script>

<style scoped lang="scss">
  @import "../../assets/styles/global";
  
  .map-selection {
    width: 100vw;
    height: 33px;
    display: flex;
    @include center;

    .select-item {
      background-color: #ebedf0;
      width: 15vw;
      height: 100%;
      @include center;
      font-size: 12px;
      color: #7d7e80;
      position: relative;

      &:active {
        background-color: whitesmoke;
      }

      &:after {
        content: '';
        width: 1px;
        height: 16px;
        background-color: #c8c9cc;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -8px;
      }

      &:first-child:after {
        background-color: #ebedf0;

      }
    }
  }
</style>
